<ui:composition 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"    
    xmlns:composite="http://java.sun.com/jsf/composite">
    <composite:interface>
        <composite:attribute name="supportedThemes" type="java.lang.String[]" required="true"/>
        <composite:attribute name="themeFolder" type="java.lang.String"/>
        <composite:attribute name="inputId" type="java.lang.String" required="true"/>
        <composite:attribute name="height" type="java.lang.String"  default="170px"/>
        <composite:attribute name="width" type="java.lang.String" default="440px"/>
    </composite:interface>

    <composite:implementation>
        <c:set var="themeFolder" value="#{cc.attrs.themeFolder}"/>
        <c:if test="#{empty cc.attrs.themeFolder}">
            <c:set var="themeFolder" value="#{facesContext.externalContext.requestContextPath}#{facesContext.externalContext.requestServletPath}/javax.faces.resource/theme"/>
        </c:if>
        <script type="text/javascript">
            deltaset.theme().registerInputId('#{cc.attrs.inputId}');
        </script>
        <ul style="height:#{cc.attrs.height};width:#{cc.attrs.width};overflow-y:auto">
            <ui:repeat value="#{cc.attrs.supportedThemes}" var="theme">
                <li>                    
                    <a href="#" style="border:0" onclick="deltaset.theme().changeTo('#{theme}')">
                        <img width="90" title="#{theme}" alt="#{theme}" src="#{themeFolder}/#{theme}/theme_90_icon.png" />
                    </a>
                </li>
            </ui:repeat>
        </ul>
    </composite:implementation>
</ui:composition>